<!--
 * @Author: your name
 * @Date: 2022-02-14 07:54:38
 * @LastEditTime: 2022-02-17 09:33:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3.2\src\views\users\index.vue
-->
<template>
  <el-card>
    <el-row :gutter="20"
            class="header">
      <el-col :span="7">
        <el-input :placeholder="$t('teble.placeholder')"
                  clearable
                  v-model="queryFrom.query"></el-input>
      </el-col>
      <el-button type="primary"
                 :icon="Search"
                 @click="initGetUsersList">{{$t(`table.search`)}}</el-button>
      <el-button type="primary"
                 @click="handleDialogValue()">{{$t(`table.adduser`)}}</el-button>

    </el-row>
    <el-table :data="tableData"
              stripe
              style="width: 100%">
      <el-table-column :width="item.width"
                       :prop="item.prop"
                       :label="$t(`table.${item.label}`)"
                       v-for="(item, index) in options"
                       :key="index">
        <template v-slot="{row}"
                  v-if="item.prop==='mg_state'">
          <el-switch v-model="row.mg_state"
                     @change="changeState(row)" />
        </template>
        <template v-slot="{row}"
                  v-else-if="item.prop==='create_time'">
          <!-- <el-switch v-model="row.mg_state" /> -->
          {{$filters.filetrTimes(row.create_time)}}
        </template>
        <template #default="{row}"
                  v-else-if="item.prop ==='action'">
          <el-button type="primary"
                     size="mini"
                     :icon="Edit"
                     @click="handleDialogValue(row)"></el-button>
          <el-button type="warning"
                     size="mini"
                     :icon="Setting"></el-button>
          <el-button type="danger"
                     size="mini"
                     :icon="Delete"
                     @click="delUser(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination v-model:currentPage="queryFrom.pagenum"
                     v-model:page-size="queryFrom.pagesize"
                     :page-sizes="[2, 5, 10, 15]"
                     :small="small"
                     :disabled="disabled"
                     :background="background"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </el-card>
  <Dialog v-model="dialogVisible"
          @initUsersList="initGetUsersList"
          :dialogTitie="dialogTitie"
          v-if="dialogVisible"
          :dialogTableValue="dialogTableValue" />
</template>

<script setup>
import { ref } from 'vue'
import { Search, Edit, Setting, Delete } from '@element-plus/icons-vue'
import { getUser, changeUserState, deleteUser } from '../../api/users'
import { options } from './options'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import Dialog from './components/dialog.vue'
import { isNull } from '@/utils/filters'
const i18n = useI18n()
const queryFrom = ref({
  query: '',
  pagenum: 1,
  pagesize: 2
})
const tableData = ref([])
const total = ref(0)

const dialogVisible = ref(false)
const dialogTitie = ref('')
const dialogTableValue = ref({})

const initGetUsersList = async () => {
  const res = await getUser(queryFrom.value)
  total.value = res.total
  tableData.value = res.users
}
initGetUsersList()

const handleSizeChange = (pageSize) => {
  queryFrom.value.pagenum = 1
  queryFrom.value.pagesize = pageSize
  initGetUsersList()
}

const handleCurrentChange = (pageNum) => {
  queryFrom.value.pagenum = pageNum
  initGetUsersList()
}

const changeState = async (info) => {
  await changeUserState(info.id, info.mg_state)
  ElMessage({
    message: i18n.t('message.updeteSuccess'),
    type: 'success'
  })
}

const handleDialogValue = (row) => {
  if (isNull(row)) {
    dialogTitie.value = '添加用户'
    dialogTableValue.value = {}
  } else {
    dialogTitie.value = '编辑用户'
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}

const delUser = (row) => {
  ElMessageBox.confirm(i18n.t('dialog.deleteTitle'), 'Warning', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  })
    .then(async () => {
      await deleteUser(row.id)
      ElMessage({
        type: 'success',
        message: 'Delete completed'
      })
      initGetUsersList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled'
      })
    })
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
::v-deep .el-input__suffix {
  align-items: center;
}
::v-deep .el-pagination {
  padding-top: 16px;
  box-sizing: border-box;
  text-align: center;
}
</style>
